<!-- 
// 订单号	姓名	手机号码	身份证号	地址	套餐	订单状态	结算状态	更新时间	操作	备注
export interface OrderInfo {
    /** 客户地址 */
    clientAddr: string;
    /** 客户身份证号 */
    clientIdCard: string;
    /** 客户加密身份证号 */
    clientIdCardEnc: string;
    /** 客户姓名 */
    clientName: string;
    /** 客户套餐 */
    clientPackage: string;
    /** 客户手机号码 */
    clientPhone: string;
    /** 客户加密手机号码 */
    clientPhoneEnc: string;
    /** 创建时间 */
    createTime: string;
    /** 创建者账号 */
    creatorAccount: string;
    /** 删除标志 */
    delFlag: number;
    /** 订单ID */
    id: number;
    /** 订单号 */
    orderId: number;
    /** 订单状态 */
    orderStatus: number;
    /** 结算状态 */
    paymentStatus: number;
    /** 备注 */
    remark: string;
    /** 负责人账号 */
    responsibleAccount: string;
    /** 负责的服务商 */
    responsibleServiceProvider: string;
    /** 序列化版本UID */
    serialVersionUID: number;
    /** 更新时间 */
    updateTime: string;
}
-->
<script setup lang="ts">
import { OrderInfo } from '@/types/order/order'
import { computed } from 'vue'

const props = defineProps<{
	order: OrderInfo
}>()

const createTime = computed(() => {
	const date = new Date(props.order.createTime)
	const year = date.getFullYear()
	const month = date.getMonth() + 1
	const day = date.getDate()
	return `${year}-${month}-${day}`
})

// 订单状态
const orderStatusText = computed(() => {
	switch (props.order.orderStatus) {
		case 0:
			return {
				text: '待处理',
				color: '#ff976a',
				bgColor: 'rgba(255, 151, 106, 0.1)'
			}
		case 1:
			return {
				text: '处理中',
				color: '#1989fa',
				bgColor: 'rgba(25, 137, 250, 0.1)'
			}
		case 2:
			return {
				text: '已完成',
				color: '#07c160',
				bgColor: 'rgba(7, 193, 96, 0.1)'
			}
		default:
			return {
				text: '未知',
				color: '#969799',
				bgColor: 'rgba(150, 151, 153, 0.1)'
			}
	}
})

// 支付状态
const paymentStatusText = computed(() => {
	return props.order.paymentStatus === 0 ? '未结算' : '已结算'
})
</script>

<template>
	<div class="order-item">
		<div class="order-header">
			<div class="left">
				<span class="order-id">订单号：{{ order.orderId }}</span>
				<span class="create-time">日期：{{ createTime }}</span>
			</div>
			<div class="right">
				<span class="payment-status" :class="{ unpaid: order.paymentStatus === 0 }">
					{{ paymentStatusText }}
				</span>
				<span class="status" :style="{ color: orderStatusText.color }">
					{{ orderStatusText.text }}
				</span>
			</div>
		</div>

		<div class="order-content">
			<div class="user-info">
				<div class="info-row">
					<div class="info-item">
						<van-icon name="user-o" />
						<span>{{ order.clientName }}</span>
					</div>
					<div class="info-item">
						<van-icon name="phone-o" />
						<span>{{ order.clientPhone }}</span>
					</div>
					<div class="info-item">
						<van-icon name="idcard" />
						<span>{{ order.clientIdCard }}</span>
					</div>
				</div>
				<div class="info-item address">
					<van-icon name="location-o" />
					<span>{{ order.clientAddr }}</span>
				</div>
			</div>

			<div class="package-info">
				<div class="package-name">{{ order.clientPackage }}</div>
				<div class="update-time">更新时间：{{ order.updateTime }}</div>
			</div>
		</div>

		<div class="order-footer">
			<div class="remark" v-if="order.remark">
				<van-icon name="notes-o" />
				<span>{{ order.remark }}</span>
			</div>
			<div class="operator">
				<span>负责人：{{ order.responsibleAccount }}</span>
				<span>服务商：{{ order.responsibleServiceProvider }}</span>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.order-item {
	background: #fff;
	border-radius: 4px;
	padding: 16px;
	margin-bottom: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;

	@media (min-width: 768px) {
		padding: 16px 20px;
		font-size: 13px;

		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		}
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 12px;
		margin-bottom: 12px;
		border-bottom: 1px solid #f5f5f5;

		.left {
			display: flex;
			align-items: center;
			gap: 12px;

			.order-id {
				font-size: 14px;
				font-weight: 500;
				color: #333;
			}

			.create-time {
				font-size: 12px;
				color: #999;
			}
		}

		.right {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 13px;

			.status,
			.payment-status {
				padding: 4px 6px;
				border-radius: 2px;
			}

			.payment-status {
				background: #f5f5f5;
				color: #07c160;

				&.unpaid {
					color: #ff976a;
				}
			}
		}
	}

	.order-content {
		.user-info {
			margin-bottom: 12px;

			.info-row {
				display: flex;
				flex-wrap: wrap;
				gap: 16px;
				margin-bottom: 8px;
			}

			.info-item {
				display: flex;
				align-items: center;
				font-size: 13px;
				color: #333;

				&.address {
					margin-top: 4px;
				}

				.van-icon {
					font-size: 14px;
					margin-right: 6px;
					color: #666;
				}
			}
		}

		.package-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 8px 12px;
			background: #f8f8f8;
			border-radius: 4px;

			.package-name {
				font-size: 13px;
				color: #1989fa;
				font-weight: 500;
			}

			.update-time {
				font-size: 12px;
				color: #999;
			}
		}
	}

	.order-footer {
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid #f5f5f5;
		font-size: 12px;

		.remark {
			display: flex;
			align-items: center;
			color: #666;
			margin-bottom: 8px;

			.van-icon {
				margin-right: 4px;
			}
		}

		.operator {
			display: flex;
			justify-content: space-between;
			color: #999;
		}
	}
}

// 暗黑模式适配
:root[data-theme='dark'] {
	.order-item {
		background: #2c2c2c;

		.order-header {
			border-bottom-color: #383838;

			.order-id {
				color: #e0e0e0;
			}
		}

		.order-content {
			.info-item {
				color: #e0e0e0;
			}

			.package-info {
				background: #383838;
			}
		}

		.order-footer {
			border-top-color: #383838;
		}
	}
}
</style>
